<template>
    <el-form inline >
        <el-form-item label="关键字">
            <el-input v-model="query.payload.trace" placeholder="关键字" />
        </el-form-item>
        <el-form-item label="日志级别">
            <el-select v-model="query.payload.level" placeholder="日志级别">
                <el-option  label="ERROR" value = 'ERROR' />
                <el-option  label="INFO" value = 'INFO' />
            </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
            <el-date-picker
                    v-model="query.payload.dateRange"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain  activity @click="querySysLog">查询</el-button>
        </el-form-item>
    </el-form>

    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border  v-loading="loading"  :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column align="center" type="index"  label="序号"  width="100px" />
        <el-table-column align="center"  prop="client" label="主机" />
        <el-table-column align="center"  prop="level" label="日志级别" />
        <el-table-column align="center"  prop="msg" show-overflow-tooltip  label="日志内容" />
        <el-table-column align="center"  prop="thread" label="线程" />
        <el-table-column align="center"  prop="timestamp" label="时间" >
            <template #default="scope">
                {{moment(scope.row.timestamp).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="trace" show-overflow-tooltip  label="堆栈信息"/> >
    </el-table>
    <el-pagination
            style="display: flex;align-items:center;justify-content:center;"
            v-model:currentPage="query.currentPage"
            v-model:page-size="query.pageSize"
            :page-sizes="[10, 20, 30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="query.total"
            @size-change="querySysLog"
            @current-change="querySysLog"
    />
</template>

<script setup>
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'
    import moment from 'moment'

    import useAuthBtn from '@/hooks/useAuthBtn.js'
    let authBtn = useAuthBtn()

    let data = reactive({
        open:false,
        tableData:[],
        type:"",
        id:"",
    });
    let loading = ref(false)
    let roleOnUser = ref(null)
    let modUser = ref(null)
    let importDataDialogue = ref(null)
    let genderDicItems = reactive([])

    let query = reactive({currentPage:1, pageSize:10, total:0, payload:{dateRange:[], level:'ERROR'}})
    onMounted(() => {
    })

    function querySysLog(){
        if(!query.payload.dateRange){
            ElMessage({message: '时间必填！',type: 'error'})
        }
        query.payload.startTime = query.payload.dateRange[0]
        query.payload.endTime = query.payload.dateRange[1]

        request.post("/api/sysLog/page", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function reset (){
        query.username = ""
        query.gender = ""
    }

</script>
<style lang="css" scoped>
    .address {overflow:hidden; white-space:nowrap; word-wrap:break-word; text-overflow:"ellipsis";}
    .head {background-color: #9561cc}
    [v-cloak]{
        display: none  !important;
    }
   .demo-form-inline{
       display: flex !important;
       justify-content: flex-start !important;
       align-items: center !important;
   }
</style>